<template>
<!--  <a-space align="center" style="margin-bottom: 16px">-->
<!--    CheckStrictly:-->
<!--    <a-switch></a-switch>-->
<!--  </a-space>-->
  <a-layout>
    <a-layout-content
      :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
      <a-button type="primary" @click="add">insert</a-button>

      <a-table  :row-key="record=>record.id" :columns="columns" :data-source="level" :pagination="false">

        <template #bodyCell="{ column ,record}">
          <template v-if="column.key === 'action'">
            <a-space>
            <a-button type="primary" @click="update(record)">update</a-button>

              <a-popconfirm
                  title="Are you sure delete this record?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirmDel(record.id)"
                  @cancel="cancel"
              >
                <a-button type="primary" danger >Delete</a-button>
              </a-popconfirm>

            </a-space>
          </template>
        </template>

      </a-table>
    </a-layout-content>

    <div>
      <a-modal
          v-model:visible="visible"
          title="Title"
          @ok="handleOk"
      >
        <p>
          <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">

            <a-form-item label="Category Name">
              <a-input v-model:value="formState.name" />
            </a-form-item>

            <a-form-item label="Category Parent">
<!--              <a-input v-model:value="formState.parent" />-->
              <a-select
                  ref="select"
                  v-model:value="formState.parent"
              >
                <a-select-option v-for="item in level" :key="item.id" :value="item.id" :disabled="formState.id === item.id">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="Category Sort">
              <a-input v-model:value="formState.sort" />
            </a-form-item>

          </a-form>
        </p>
      </a-modal>
    </div>

  </a-layout>
</template>

<script>
import axios from "axios";
import {ref, onMounted } from "vue"
import { message } from 'ant-design-vue'
import {arrayToTree, isEmpty} from '@/util/Tool'


export default {
  name: "AdminCategory",
  setup(){
    const columns  = ref([
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'ParentId',
        dataIndex: 'parent',
        key: 'parent',
      },
      {
        title: 'Sort',
        dataIndex: 'sort',
        key: 'sort',
      },
      {
        title: 'action',
        key: 'action',
        dataIndex: 'action',
      }
    ])

    const visible = ref(false);
    const formState = ref({})
    const level = ref();

    onMounted(()=>{
      console.log("onMounted AdminCategory")
      load()
    })

    function load(){
      console.log("load...")
      axios.get("api/categoryList")
          .then(res=>{
            console.log(res)
            level.value = arrayToTree(res.data.data,0)

      })
    }

    const setParent = (data,id) =>{
      for(let i=0;i<data.length;i++){
        const d = data[i];
        if(d.id === id){
          formState.value.parentName = d.name
        }else{
          const child = d.children
          if(!isEmpty(child)){
            setParent(child,id)
          }
        }
      }
      if(formState.value.parentName == undefined){
        formState.value.parentName="无"
      }
    }

    const update = (record) => {
      console.log("update")
      formState.value = JSON.parse(JSON.stringify(record))

      formState.value.parent = formState.value.parent.toString()

      visible.value = true
    };

    const add = () => {
      formState.value = {}
      visible.value = true
    };

    const handleOk = () => {
      console.log("handleOk")
      console.log(formState.value)
      axios.post("api/category",formState.value)
          .then(res => {
            if(res.data.code === "200"){
              visible.value = false
              load()
            }else{
              message.error(res.data.msg);
            }
          })
    }

    const confirmDel = (id) => {
      console.log("confirmDel")
      axios.delete("api/category/"+id,)
          .then(res => {
            console.log(res.data.code)
            if(res.data.code === "200"){
              message.success(res.data.msg);
              load()
            }else{
              message.error(res.data.msg);
            }
          })
    };

    return{
      load,
      columns,
      visible,
      formState,
      level,
      setParent,
      update,
      add,
      handleOk,
      confirmDel,

      labelCol: {
        style: {
          width: '150px',
        },
      },
      wrapperCol: {
        span: 14,
      },

    }
  }
}
</script>

<style scoped>

</style>